<template>
  <div class="admin-content">
    <el-col
      class="mt-3"
      :xs="24"
      :sm="100"
      :lg="100"
      style="padding: 10px;"
    >
      <el-card shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
                      <span class="text-[var(--el-text-color-secondary)]">
                        我的消息
                      </span>
            <el-tag :type="'danger'">
              预约通知
            </el-tag>
          </div>
        </template>
        <div class="flex items-center justify-between mt-5">
          <div class="text-lg text-right">
            您昨天预约的羽毛球场将于20分钟后开场，请及时到达
          </div>
          <span>
            中德体育馆
          </span>
        </div>

        <div
          class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
        >
          <span> 2024/6/24 </span>
            <el-link
              @click="readMsg"
              type="primary"
              :underline="false"
              style="user-select: none"
            >标记已读
            </el-link>
        </div>
      </el-card>
    </el-col>
    <el-col
      class="mt-3"
      :xs="24"
      :sm="100"
      :lg="100"
      style="padding: 10px;"
    >
      <el-card shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
                      <span class="text-[var(--el-text-color-secondary)]">
                        我的消息
                      </span>
            <el-tag :type="'danger'">
              预约通知
            </el-tag>
          </div>
        </template>
        <div class="flex items-center justify-between mt-5">
          <div class="text-lg text-right">
            您今天预约的乒乓球场将于明天开场，请及时到达
          </div>
          <span>
            中德体育馆
          </span>
        </div>

        <div
          class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
        >
          <span> 2024/6/25 </span>
          <el-link
            @click="readMsg"
            type="primary"
            :underline="false"
            style="user-select: none"
          >标记未读
          </el-link>
        </div>
      </el-card>
    </el-col>
    <el-col
      class="mt-3"
      :xs="24"
      :sm="100"
      :lg="100"
      style="padding: 10px;"
    >
      <el-card shadow="never">
        <template #header>
          <div class="flex items-center justify-between">
                      <span class="text-[var(--el-text-color-secondary)]">
                        公告
                      </span>
            <el-tag :type="'danger'">
              失物招领通知
            </el-tag>
          </div>
        </template>
        <div class="flex items-center justify-between mt-5">
          <div class="text-lg text-right">
            昨天体育馆工作人员在羽毛球场捡到一个手表，请失主主动联系中德体育馆
          </div>
          <span>
            中德体育馆
          </span>
        </div>

        <div
          class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
        >
          <span> 2024/6/26 </span>
          <el-link
            @click="readMsg"
            type="primary"
            :underline="false"
            style="user-select: none"
          >标记未读
          </el-link>
        </div>
      </el-card>
    </el-col>
  </div>
</template>
<script setup>
const isAnnounceShow = ref(false)
const readMsg = () =>{

}
</script>
